<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布新文章 - 个人博客</title>
    <!-- Bootstrap 4 CSS -->
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- Quill富文本编辑器 -->
    <link href="${pageContext.request.contextPath}/static/quill/quill.snow.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/quill/quill.js"></script>
    <!-- Bootstrap 和 jQuery 依赖 -->
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
    <style>
        body {
            background-color: #f5f7fb;
            font-family: 'KaiTi';
            color: #333;
            padding-top: 20px;
        }

        .header-card {
            background: linear-gradient(135deg, black 50%, grey 100%);
            color: white;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            margin-bottom: 25px;
        }

        .form-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
            padding: 25px;
            margin-bottom: 30px;
        }

        .form-section {
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 1px solid #eee;
        }

        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .section-title {
            position: relative;
            padding-bottom: 10px;
            margin-bottom: 20px;
            color: var(--primary-color);
        }

        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--accent-color);
        }

        .custom-file-label::after {
            content: "浏览";
        }

        .tag-item {
            display: inline-block;
            background: #e0e7ff;
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            margin: 5px;
            font-size: 0.9rem;
        }

        .tag-item .remove-tag {
            margin-left: 5px;
            cursor: pointer;
            color: #888;
        }

        .tag-item .remove-tag:hover {
            color: #ff4757;
        }

        .editor-container {
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 20px;
            background: white;
        }

        #editor {
            height: 350px;
            padding: 15px;
            font-size: 16px;
        }

        .ql-toolbar {
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background: #f8f9fa;
        }

        .action-buttons .btn {
            min-width: 120px;
            margin-right: 10px;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .image-preview-container {
            background: #f8f9fa;
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            min-height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            margin-bottom: 20px;
        }

        .image-preview-container img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #adb5bd;
            margin-right: 8px;
        }

        .status-indicator.published {
            background: var(--success-color);
        }

        .status-indicator.draft {
            background: #ffd43b;
        }

        .custom-control-label::before {
            border: 1px solid #ced4da;
        }

        .custom-control-input:checked ~ .custom-control-label::before {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .form-control:focus, .custom-select:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
        }

        @media (max-width: 768px) {
            .action-buttons .btn {
                width: 100%;
                margin-right: 0;
            }

            #editor {
                height: 300px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="header-card p-4">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2><i class="fas fa-pen-alt mr-2"></i>发布新文章</h2>
                        <p class="mb-0">创建并发布新的博客文章</p>
                    </div>
                    <div>
                        <a href="${pageContext.request.contextPath}/article/index/1" class="btn btn-lg btn-light">返回首页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <div class="form-container">
                <div class="form-section">
                    <h4 class="section-title">文章信息</h4>
                    <div class="form-group">
                        <label for="articleTitle">文章标题</label>
                        <input type="text" class="form-control form-control-lg" id="articleTitle" placeholder="输入吸引人的标题...">
                    </div>
                    <div class="form-group">
                        <label for="articleTitle">文章简介</label>
                        <textarea  class="form-control form-control-lg text-lg-left" id="articleSummary">输入文章概述...</textarea>
                    </div>
                </div>

                <div class="form-section">
                    <h4 class="section-title">内容编辑</h4>
                    <div class="editor-container">
                        <div id="editor">
                            <p>在这里开始编写你的文章...</p>
                            <p><br></p>
                            <p>你可以使用工具栏格式化文本，添加列表、链接等。</p>
                        </div>
                    </div>
                </div>
                <!-- 发布设置 -->
                <div class="form-section">
                    <h4 class="section-title">发布设置</h4>
                    <div class="form-group">
                        <label>文章状态</label>
                        <div class="d-flex">
                            <div class="custom-control custom-radio mr-3">
                                <input type="radio" id="visibilityPublic" name="articleStatus" value="1" class="custom-control-input" checked>
                                <label class="custom-control-label" for="visibilityPublic">公开</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input type="radio" id="visibilityPrivate" name="articleStatus" value="0" class="custom-control-input">
                                <label class="custom-control-label" for="visibilityPrivate">仅个人可见</label>
                            </div>
                        </div>
                    </div>
                </div>


               <%-- <div class="form-section">
                    <h4 class="section-title">分类目录</h4>
                    <div class="form-group col-md-4">
                        <select class="custom-select" id="articleCategory">
                            <option selected>选择分类</option>
                            <option value="1">前端开发</option>
                            <option value="2">后端技术</option>
                            <option value="3">数据库</option>
                            <option value="4">DevOps</option>
                            <option value="5">人工智能</option>
                            <option value="6">生活随笔</option>
                        </select>
                    </div>
                </div>--%>

                <!-- <div class="form-section">
                    <h4 class="section-title">文章标签</h4>
                    <div class="form-group">
                        <div class="d-flex">
                            <input type="text" class="form-control mr-2" id="newTag" placeholder="添加新标签">
                            <button class="btn btn-outline-primary" id="addTagBtn">添加</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div id="tagsContainer">
                            <span class="tag-item">JavaScript <span class="remove-tag">&times;</span></span>
                            <span class="tag-item">Web开发 <span class="remove-tag">&times;</span></span>
                            <span class="tag-item">Bootstrap <span class="remove-tag">&times;</span></span>
                        </div>
                    </div>
                </div> -->

                <!-- <div class="form-section">
                    <h4 class="section-title">特色图片</h4>
                    <div class="image-preview-container" id="imagePreview">
                        <div class="text-center">
                            <i class="fas fa-cloud-upload-alt fa-3x mb-3 text-muted"></i>
                            <p class="mb-2">上传文章封面图片</p>
                            <p class="text-muted small">建议尺寸：1200×630像素</p>
                            <button class="btn btn-sm btn-outline-primary mt-2">选择图片</button>
                        </div>
                    </div>
                </div> -->

                <div class="action-buttons text-center">
                    <button class="btn btn-primary btn-lg px-4" id="publishBtn">
                        <i class="fas fa-paper-plane mr-2"></i>发布文章
                    </button>
                    <%--<button class="btn btn-outline-secondary btn-lg px-4" id="saveDraftBtn">
                        <i class="fas fa-save mr-2"></i>保存草稿
                    </button>--%>
                    <!-- <button class="btn btn-outline-info btn-lg px-4" id="previewBtn">
                        <i class="fas fa-eye mr-2"></i>预览
                    </button> -->
                </div>
            </div>
        </div>
    </div>
</div>


<script>
    //初始化富文本编辑器
    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'script': 'sub'}, { 'script': 'super' }],
                [{ 'indent': '-1'}, { 'indent': '+1' }],
                [{ 'direction': 'rtl' }],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'align': [] }],
                ['link', 'image', 'video'],
                ['clean']
            ]
        },
        placeholder: '开始编写你的文章内容...',
        theme: 'snow'
    });

    // 文件上传预览
    <%--document.getElementById('featuredImage').addEventListener('change', function(e) {--%>
    <%--    const file = e.target.files[0];--%>
    <%--    if (file) {--%>
    <%--        const reader = new FileReader();--%>
    <%--        reader.onload = function(e) {--%>
    <%--            const preview = document.getElementById('imagePreview');--%>
    <%--            preview.innerHTML = `<img src="${e.target.result}" alt="文章封面预览">`;--%>
    <%--        }--%>
    <%--        reader.readAsDataURL(file);--%>
    <%--    }--%>
    <%--});--%>

    // 标签管理
    <%--$('#addTagBtn').click(function() {--%>
    <%--    const newTag = document.getElementById('newTag').value.trim();--%>
    <%--    if (newTag) {--%>
    <%--        const tagItem = document.createElement('span');--%>
    <%--        tagItem.className = 'tag-item';--%>
    <%--        tagItem.innerHTML = `${newTag} <span class="remove-tag">&times;</span>`;--%>
    <%--        $('#tagsContainer').append(tagItem);--%>
    <%--        document.getElementById('newTag').value = '';--%>

    <%--        // 添加删除事件--%>
    <%--        tagItem.querySelector('.remove-tag').addEventListener('click', function() {--%>
    <%--            tagItem.remove();--%>
    <%--        });--%>
    <%--    }--%>
    <%--});--%>

    // 为现有标签添加删除事件
    // document.querySelectorAll('.remove-tag').forEach(tag => {
    //     tag.addEventListener('click', function() {
    //         this.parentElement.remove();
    //     });
    // });

    // 文章可见性切换
    // document.querySelectorAll('input[name="articleVisibility"]').forEach(radio => {
    //     radio.addEventListener('change', function() {
    //         const passwordField = document.getElementById('passwordField');
    //         passwordField.style.display = this.id === 'visibilityPassword' ? 'block' : 'none';
    //     });
    // });

    // 状态切换
    // document.querySelectorAll('input[name="articleStatus"]').forEach(radio => {
    //     radio.addEventListener('change', function() {
    //         const statusText = document.getElementById('status-text');
    //         const statusIndicator = document.querySelector('.status-indicator');
    //
    //         if (this.id === 'statusPublished') {
    //             statusText.textContent = '已发布';
    //             statusIndicator.className = 'status-indicator published';
    //         } else {
    //             statusText.textContent = '草稿';
    //             statusIndicator.className = 'status-indicator draft';
    //         }
    //     });
    // });

    // 文件选择标签更新
    // document.querySelector('.custom-file-input').addEventListener('change', function(e) {
    //     const fileName = e.target.files[0] ? e.target.files[0].name : '选择文件';
    //     document.querySelector('.custom-file-label').textContent = fileName;
    // });

    // 发布按钮
    $('#publishBtn').click(function (){
        //文章标题
        const articleTitle = $('#articleTitle').val();
        // 文章简介
        const articleSummary = $('#articleSummary').val();
        //文章内容（带格式）
        const articleContent = $('#editor').html();
        const articleStatus = $('input[name="articleStatus"]:checked').val();
        if (!articleTitle) {
            alert('请填写文章标题');
            return;
        }

        if(!articleSummary){
            alert('请填写文章简介');
            return;
        }
        const articleJson = {'articleTitle':articleTitle,
            'articleSummary':articleSummary,
            'articleContent':articleContent,
            'articleStatus':articleStatus};
        $.ajax({
            url:'${pageContext.request.contextPath}/article/addArticle',
            data:articleJson,
            type:'post',
            success:function (data,status,xmlHttpRequest){
                alert("提交成功...");
                setTimeout(function (){
                    window.location.href='${pageContext.request.contextPath}/article/index/1';
                },1000);
            }
        })
    })

    //
    // // 保存草稿
    // document.getElementById('saveDraftBtn').addEventListener('click', function() {
    //     alert('草稿保存成功！');
    // });

    // 预览
    // document.getElementById('previewBtn').addEventListener('click', function() {
    //     alert('预览功能将在新窗口打开文章预览');
    // });

    <%--// 设置默认日期时间为当前时间--%>
    <%--const now = new Date();--%>
    <%--const year = now.getFullYear();--%>
    <%--const month = String(now.getMonth() + 1).padStart(2, '0');--%>
    <%--const day = String(now.getDate()).padStart(2, '0');--%>
    <%--const hours = String(now.getHours()).padStart(2, '0');--%>
    <%--const minutes = String(now.getMinutes()).padStart(2, '0');--%>

    <%--document.getElementById('publishDate').value = `${year}-${month}-${day}T${hours}:${minutes}`;--%>
</script>
</body>
</html>
